<template>
  <div class="management-box">
    <Row class="table-row" :gutter="40">
      <Col span="12" class="table-col">
        <Table
          border
          class="table-container"
          :columns="columnsLT"
          :data="tableDataLT"
          :loading="isLoadingLT"
        ></Table>
      </Col>
      <Col span="12" class="table-col">
        <Table
          border
          class="table-container"
          :columns="columnsRT"
          :data="tableDataRT"
          :loading="isLoadingRT"
        ></Table>
      </Col>
    </Row>
    <Row class="table-row" :gutter="40">
      <Col span="12" class="table-col">
        <Table
          border
          class="table-container"
          :columns="columnsLB"
          :data="tableDataLB"
          :loading="isLoadingLB"
        ></Table>
      </Col>
      <Col span="12" class="table-col">
      </Col>
    </Row>

    <!-- 点击编辑图片 -->
    <Modal
      v-model="showEditModal"
      width="50"
      footer-hide
    >
      <div class="modal-container">
        <Row class="modal-content" :gutter="16">
          <Col span="6">
            <p class="modal-label">Banner图片</p>
            <p class="modal-label-detail">(建议尺寸 111*222)</p>
          </Col>
          <Col span="18">
            <Upload
              type="drag"
              action="/"
            >
              <div style="padding: 70px 0">
                <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
                <p>点击上传图片</p>
              </div>
            </Upload>
          </Col>
        </Row>
        <div slot="footer" class="modal-footer">
          <Button type="primary" @click="onClickEditConfirm">完成</Button>
        </div>
      </div>
    </Modal>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showEditModal: false,
      columnsLT: [
        {
          title: '客户爸爸图片预览',
          key: 'img',
          // width: 400,
          align: 'center',
          render: (h, params) => {
            return h('div', [
              h('img', {
                attrs: {
                  src: this.tableDataLT[params.index].imagePath
                },
                style: {
                  width: '250px',
                  height: '150px',
                  marginTop: '10px',
                  marginBottom: '10px'
                }
              }, )
            ]);
          }
        },
        {
          title: '操作',
          key: 'action',
          width: 150,
          align: 'center',
          render: (h, params) => {
            return h('div', [
              h('Button', {
                props: {
                  type: 'primary',
                  size: 'small'
                },
                style: {
                  // marginRight: '5px',
                  // marginTop: '10px'
                },
                on: {
                  click: () => {
                    this.check(params.index)
                  }
                }
              }, '编辑图片')
            ])
          }
        }
      ],
      columnsRT: [
        {
          title: '撒钱活动图片预览',
          key: 'img',
          // width: 400,
          align: 'center',
          render: (h, params) => {
            return h('div', [
              h('img', {
                attrs: {
                  src: this.tableDataLT[params.index].imagePath
                },
                style: {
                  width: '250px',
                  height: '150px',
                  marginTop: '10px',
                  marginBottom: '10px'
                }
              }, )
            ]);
          }
        },
        {
          title: '操作',
          key: 'action',
          width: 150,
          align: 'center',
          render: (h, params) => {
            return h('div', [
              h('Button', {
                props: {
                  type: 'primary',
                  size: 'small'
                },
                style: {
                  // marginRight: '5px',
                  // marginTop: '10px'
                },
                on: {
                  click: () => {
                    this.check(params.index)
                  }
                }
              }, '编辑图片')
            ])
          }
        }
      ],
      columnsLB: [
        {
          title: 'VIP活动图片预览',
          key: 'img',
          // width: 400,
          align: 'center',
          render: (h, params) => {
            return h('div', [
              h('img', {
                attrs: {
                  src: this.tableDataLT[params.index].imagePath
                },
                style: {
                  width: '250px',
                  height: '150px',
                  marginTop: '10px',
                  marginBottom: '10px'
                }
              }, )
            ]);
          }
        },
        {
          title: '操作',
          key: 'action',
          width: 150,
          align: 'center',
          render: (h, params) => {
            return h('div', [
              h('Button', {
                props: {
                  type: 'primary',
                  size: 'small'
                },
                style: {
                  // marginRight: '5px',
                  // marginTop: '10px'
                },
                on: {
                  click: () => {
                    this.check(params.index)
                  }
                }
              }, '编辑图片')
            ])
          }
        }
      ],
      tableDataLT: [{
        img: '123123'
      }],
      tableDataRT: [{
        img: '123123'
      }],
      tableDataLB: [{
        img: '123123'
      }],
      isLoadingLT: false,
      isLoadingRT: false,
      isLoadingLB: false,
    }
  },
  mounted() {

  },
  methods: {
    onClickEditConfirm() {

    },
    check() {
      this.showEditModal = true
    }
  }
}
</script>

<style scoped>
* {
  color: #000;
}
.management-box {
  height: calc(100vh - 66px);
  overflow-x: hidden;
}
.table-row {
  padding: 40px 40px 20px 40px;
  margin-bottom: 10px;
}
.table-col {
  /*padding: 20px;*/
}
.table-container {

}
.modal-container {
  padding: 30px 30px 20px 30px;
}
.modal-content {
  margin-top: 15px;
}
.modal-label {
  font-size: 16px;
  line-height: 32px;
  text-align: center;
}
.modal-label-detail {
  text-align: center;
}
.modal-input {
  width: 100%;
}
.modal-footer {
  text-align: center;
  margin-top: 15px;
}
.modal-footer button {
  color: #fff;
  width: 100px;
}
</style>
